iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
1
影片教學

前端框架新選擇 - 30 天從 0 到 1 學 Svelte系列 第 27

Day27 實作簡易 Svelte(2)- 加入 If Block、Each Block 與 MustacheTag 解析

  • 分享至 

  • xImage
  •  

影片

Yes

內容

HTML + Svelte 語法

https://ithelp.ithome.com.tw/upload/images/20201006/2010356595g2lxqaAn.jpg

生成語法樹

https://ithelp.ithome.com.tw/upload/images/20201006/201035653tCd44eXbj.jpg

昨天我們實作了一個簡單的 HTML 解析器,可以解析簡單的 HTML 語法,今天我們會加入 Svelte 的語法:If Block 與 Each Block 這兩個功能,讓這些語法也能產生對應的語法樹。

這樣一來我們就可以準備做程式碼生成還有搭配 Runtime 程式碼!

◼︎ 相關連結:

・Svelte 官網 https://svelte.dev
・Github Repo https://github.com/kjj6198/tiny-svelte
・本日實作線上測試:https://kjj6198.github.io/tiny-svelte/


上一篇
Day26. 實作簡易 Svelte(1):實作 HTML 解析器 | 30 天從 0 到 1 學 Svelte
下一篇
Day28. 實作簡易 Svelte(3)- 生成程式碼(上)
系列文
前端框架新選擇 - 30 天從 0 到 1 學 Svelte30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言